<template>
    <div>
        <div>用户名：<el-input style="width:100px;" v-model="form.nickName" /></div>
        <div>密码：<el-input style="width:100px;" v-model="form.password" /></div>
        <div>年龄：<el-input style="width:100px;" v-model="form.age" /></div>
        <div>性别：<el-input style="width:100px;" v-model="form.sex" /></div>
        <div>城市：
            <el-cascader v-model="form.city" :options="options" @change="handleChange"></el-cascader>
        </div>
        <div>手机号：<el-input style="width:100px;" v-model="form.phone" /></div>
        <div>vip：<el-input style="width:100px;" v-model="form.vip" /></div>
        <identifyCode contentHeight="100"></identifyCode>
        <el-button type="danger" @click="eventSubmit">提交</el-button>
    </div>
</template>

<script>
//0、在引入之前需要安装identitycode组件
//  安装命令：  npm i vue-identitycode -S

//1、引入identitycode组件
import identifyCode from 'vue-identifycode'
export default {
    components: {
        //2、将刚才引入的组件声明为组件，方便在视图中用
        identifyCode
    },
    data() {
        return {
            options: [],
            form: {
                nickName: '',
                phone: '',
                sex: '',
                age: '',
                vip: '',
                password: '',
                city: []
            }
        }
    },
    mounted(){
        this.onloadCityInfoData()
    },
    methods: {
        //加载城市列表数据
        onloadCityInfoData(){
            let url='http://localhost:5217/api/CityInfo'
            this.$http.get(url).then(res=>{
                console.log(res)
                this.options = res.data
            })
        },
        //级联选择器的事件
        handleChange(value) {
            console.log(value);
        },
        //用户注册按钮事件
        eventSubmit() {
            let url = 'http://localhost:5217/member/info/login'
            let data = {
                "nickName": this.form.nickName,
                "phone": this.form.phone,
                "password": this.form.password,
                "age": parseInt(this.form.age),
                "city": this.form.city,
                "sex": this.form.sex == 1 ? true : false,
                "vipType": parseInt(this.form.vip),
                "statue": "0"
            }
            this.$http.post(url, data).then(res => {
                this.$message(res.data.msg)
                console.log(res)
            })
        }
    }
}
</script>